In This Topic
Tutorials / ASP.NET Web Forms / Use and handling of the Selection Area

Use and handling of the Selection Area

In This Topic
This tutorial assumes that you have fully followed and understood both Your first DocuVieware ASP.NET Web Forms page and Client/Server coming and going with Custom Actions tutorials first. If this is not the case, please do it first.
 Overview

This tutorial shows how to work with selection area (also known as Region of Interest, or ROI) in a sample ASP.NET Web Forms application that will apply a negative filter on a particular area.

DocuVieware™ requires .NET Framework 4.6 or above.
The screenshots have been taken using Visual Studio 2015 and GdPicture.NET™ 14, it may differ from the current release.

Summary

The starting point of this tutorial is the application you have at the end of Your first DocuVieware ASP.NET Web Forms page, it is a prerequisite so if you do not have it, please follow this tutorial first.

You are going to add three buttons above the DocuVieware™ control, one will simply output the coordinates of the selection area (if any), another one will clear it and finally the last button will apply a negative filter on the selected area.

 Display the ROI coordinates

This is done client side very easily, add a button that will call a JavaScript function on click. Here is the code:

Displaying the ROI coordinates.
Copy Code 
<button onclick="getROICoordinates(); return false;">Display ROI coordinates</button>
Displaying the ROI coordinates.
Copy Code 
function getROICoordinates() {
     var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
     if ((coords.width == 0) && (coords.height == 0)) {
         alert("No selection area set.");
     } else {
         alert("Selection area coordinates (in inches):\nLeft: " + coords.left + "\nTop: " + coords.top + "\nWidth: " + coords.width + "\nHeight: " + coords.height);
     }
 }
 Clear the ROI

It is often usefull to have a button to clear the ROI (i.e. reset the selection area) and it is done the exact same way: a button calling a JavaScript function on click event.

Clearing the ROI.
Copy Code 
<button onclick="clearROI(); return false;">Clear ROI</button>
Clearing the ROI.
Copy Code 
function clearROI() {
     DocuViewareAPI.ClearSelectionArea("DocuVieware1");
 }
 Apply the negative filter on the ROI

Now you are going to use a CustomAction to apply the Negative filter on the selected area. You need to send the ROI coordinates server side, set a ROI on the actual image and apply the filter on it.

Applying the Negative filter.
Copy Code 
<button onclick="Negative(); return false;">Apply Negative filter on the ROI</button>
Applying the Negative filter.
Copy Code 
function Negative() {
     var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
     if ((coords.width != 0) && (coords.height != 0)) {
         DocuViewareAPI.PostCustomServerAction("DocuVieware1", false, "Negative", coords);
     }
 }
 Server side

Now, you need to handle the custom action server side. This has already been demonstrated in the Going further with DocuVieware - Custom actions tutorial so do not hesitate to go back if needed.

You are going to need a class to retrieve the parameters (i.e. the ROI coordinates). To keep it simple, you can proceed like this:  

Defining the parameters.
Copy Code 
public class roi
{
     public double left { get; set; }
     public double top { get; set; }
     public double width { get; set; }
     public double height { get; set; }
}

Because you need to handle a custom action that is triggered client side, you need to handle it in the Global.asax.cs file, in Application_Load and the dispatcher (please refer to Client-Server coming and going with Custom Actions if you need more information about this).

Handling a custom action.
Copy Code 
protected void Application_Start(object sender, EventArgs e)
{
    DocuViewareLicensing.RegisterKEY("XXXX"); //Unlocking DocuVieware
    DocuViewareEventsHandler.CustomAction += CustomActionsHandler;
}
private void CustomActionsHandler(object sender, CustomActionEventArgs e)
{
    if ((e.actionName == "Negative") && (e.args != null))
    {
       Default.handleCustomAction(e);
    }
}

Then you can implement the custom action handler itself in the Default.aspx.cs file.

To retrieve the image object, set the ROI on it based on the coordinates we received from the client and apply the filter on it, here is the corresponding source code:

Implementing the custom action handler.
Copy Code 
private static void handleCustomAction(CustomActionEventArgs e)
{
    using (GdPictureImaging gdPictureImaging = new GdPictureImaging())
    {
       int imageId;
       GdPictureStatus status = e.docuVieware.GetNativeImage(out imageId);
       if (status == GdPictureStatus.OK)
       {
          status = GdPictureStatus.GenericError;
          roi roi = (roi)JsonConvert.DeserializeObject<roi>(e.args.ToString());
          gdPictureImaging.SetROI((int)Math.Round(roi.left * gdPictureImaging.GetHorizontalResolution(imageId), 0),
                            (int)Math.Round(roi.top * gdPictureImaging.GetVerticalResolution(imageId), 0),
                            (int)Math.Round(roi.width * gdPictureImaging.GetHorizontalResolution(imageId), 0),
                            (int)Math.Round(roi.height * gdPictureImaging.GetVerticalResolution(imageId), 0));
          status = gdPictureImaging.FxNegative(imageId);
          if (status != GdPictureStatus.OK)
          {
            e.message = SendErrorMessage("Error during Negative filter: " + status.ToString());
          }
          if (status == GdPictureStatus.OK)
          {
             status = e.docuVieware.RedrawPage();
             if (status == GdPictureStatus.OK)
            {
                e.message = new DocuViewareMessage("Filter successfully applied.");
             }
             else
            {
                e.message = SendErrorMessage("Error during redraw : " + status.ToString() + ".");
             }
          }
       }
    }
}
private static DocuViewareMessage SendErrorMessage(string message)
{
    return new DocuViewareMessage(message, "#ff5656", 2500, 300, 300, false, "130%", "normal", "#FFFFFF", "none", "none", "48px", DocuViewareMessageIcon.Error);
}
See Also
Your first DocuVieware ASP.NET Web Forms page
Client/Server coming and going with Custom Actions